<template>
  <Layout style="height: 100%">
    <Header style="height: 47px">
      <Menu ref="menu" @select="select" :datas="menus" mode="horizontal"></Menu>
    </Header>
    <Content style="flex:1;height: calc( 100% - 47px);">
      <router-view></router-view>
    </Content>
  </Layout>
</template>
<script>
export default {
  name:'Dev',
  data(){
    return {
      menus:[
        {title:'模型管理',key:'models',icon:'icon-box'},
        {title: '代码工具',key:'genTool',icon:'icon-command'}
      ]
    }
  },
  watch: {
    $route() {
      if (this.$route.name) {
        //router的name与menu的key对应
        this.$refs.menu.select(this.$route.name);
      }
    }
  },
  mounted(){
    if (this.$route.name) {
      this.$refs.menu.select(this.$route.name);
    }
  },
  methods:{
    select(data) {
      if(data.key!=this.$route.name){
        this.$router.push({ name: data.key });
      }
    }
  }
}
</script>
